<template>
  <!-- 
  ant-design-vue转中文流程:
  1.在main.ts导入以下代码:
    import {ConfigProvider} from 'ant-design-vue'
    app.use(ConfigProvider)

  2.在App.vue设置在a-locale-provider组件里都转换为中文()
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
    const locale = zhCN
    <a-config-provider :locale="locale">
     <router-view></router-view>
    </a-config-provider>
   -->
  <!-- {{ auditStatus === 1 && '已通过' }}
  <hr />
  {{ auditStatus === 2 && '已通过' }} -->
  <a-config-provider :locale="locale">
    <router-view></router-view>
  </a-config-provider>
</template>

<script setup lang="ts">
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import usePageVisible from '@/hooks/usePageVisible'
import { watch } from 'vue'
const locale = zhCN
// const auditStatus = 1

// 封装一个在前台的方法,该方法会在浏览器显示/隐藏切换时触发,返回true/false
// 第一次打开不会触发下面的watch,因为绑定isibilitychange事件时浏览器是一直显示的,没有切换就不会触发
const pageVisible = usePageVisible()
watch(
  pageVisible,
  (value) => {
    if (value) {
      console.log('在前台')
    }
  },
  // 虽然第一次打开该组件时没有触发visibilitychange事件,
  // 所以pageVisible的值没有变化,watch不会调用,
  // 但是我们的默认值是true,可以利用immediate属性初级也调用watch实现第一次打开也调用
  { immediate: true }
)
</script>
<style scoped lang="less">
#app {
  height: 100vh;
}
</style>
